<style>
  .CodeMirror-merge-copy {
    display: none;
  }
  .CodeMirror-merge, .CodeMirror-merge .CodeMirror {
    height: 55vh;
  }
  .state-diff-modal .modal-dialog {
    max-width: 1200px;
    width: 90%;
  }
  .state-diff-modal .modal-body {
    height: 60vh;
  }
</style>
<div ng-controller="ExplorationHistory">
  <md-card class="oppia-editor-card">
    <h3>List of Changes</h3>
    <div ng-repeat="versionNumber in snapshotOrderArray">
      <input type="radio" name="compareVer1" ng-model="compareVersions.selectedVersion1" ng-value="versionNumber" ng-change="changeCompareVersion(versionNumber, 'selectedVersion1')" class='protractor-test-history-v1-selector'>
      <input type="radio" name="compareVer2" ng-model="compareVersions.selectedVersion2" ng-value="versionNumber" ng-change="changeCompareVersion(versionNumber, 'selectedVersion2')" class='protractor-test-history-v2-selector'>
      [<[versionNumber]>]
      <strong><[explorationVersionMetadata[versionNumber].committerId]></strong>
      <[explorationVersionMetadata[versionNumber].commitMessage]>
      <span class="pull-right">
        <em><[explorationVersionMetadata[versionNumber].createdOn]></em>
        <span ng-if="versionNumber !== currentVersion && editabilityService.isEditable()">
          | <a href="#" class='protractor-test-revert-version' ng-click="showRevertExplorationModal(versionNumber)">Revert</a>
        </span>
        <span>
          | <a href="#" ng-click="downloadExplorationWithVersion(versionNumber)" title="Download exploration as a zip file.">Download</a>
        </span>
      </span>
    </div>

    <br>

    <div ng-hide="!explorationVersionMetadata || hideCompareVersionsButton">
      <button class="btn protractor-test-show-history-graph" ng-class="{'btn-success': areCompareVersionsSelected(), 'btn-default': !areCompareVersionsSelected()}" ng-click="showHistoryGraph()" ng-disabled="!areCompareVersionsSelected()">Compare selected revisions</button>
    </div>
  </md-card>

  <md-card class="oppia-editor-card" ng-hide="hideHistoryGraph || !explorationVersionMetadata" style="position: relative;">
    <h3>Changes from version <[compareVersionMetadata.earlierVersion.versionNumber]> to version <[compareVersionMetadata.laterVersion.versionNumber]></h3>

    <div ng-hide="diffGraphData" class="oppia-align-center">
      Loading
      <span class="oppia-loading-dot-one">.</span>
      <span class="oppia-loading-dot-two">.</span>
      <span class="oppia-loading-dot-three">.</span>
    </div>
    <div state-graph-viz class='protractor-test-history-graph' graph-data="diffGraphData" node-colors="diffGraphNodeColors" node-secondary-labels="diffGraphSecondaryLabels" init-state-id2="v1InitStateId" link-property-mapping="DIFF_GRAPH_LINK_PROPERTY_MAPPING" on-click-function="onClickStateInHistoryGraph">
    </div>

    <div style="position: absolute; right: -100px; top: 10px;" ng-show="diffGraphData">
      <h4>Exploration Graph Legend</h4>
      <div state-graph-viz graph-data="legendGraph" node-colors="LEGEND_GRAPH_COLORS" node-secondary-labels="LEGEND_GRAPH_SECONDARY_LABELS" link-property-mapping="LEGEND_GRAPH_LINK_PROPERTY_MAPPING"></div>
    </div>
  </md-card>
</div>

<script type="text/ng-template" id="modals/stateDiff">
  <div class="modal-header">
    <h3>Changes for <[stateName]><span ng-show="oldStateName"> (was: <[oldStateName]>)</span></h3>
  </div>
  <table class="table" style="margin-left: 20px; table-layout: fixed; width: 97%">
    <!-- Spacing on the left of table and in the middle of the table is to ensure text above each pane is aligned to codemirror gutter. -->
    <td style="width: 47%; word-wrap: break-word">
      <div>
        <strong>Revision #<[compareVersionMetadata.laterVersion.versionNumber]></strong>
        by
        <strong><[compareVersionMetadata.laterVersion.committerId]></strong>
        on
        <strong><[compareVersionMetadata.laterVersion.createdOn]></strong>
      </div>
      <[compareVersionMetadata.laterVersion.commitMessage]>
    </td>
    <td style="width: 6%"></td>
    <td style="width: 47%; word-wrap: break-word">
      <div>
        <strong>Revision #<[compareVersionMetadata.earlierVersion.versionNumber]></strong>
        by
        <strong><[compareVersionMetadata.earlierVersion.committerId]></strong>
        on
        <strong><[compareVersionMetadata.earlierVersion.createdOn]></strong>
      </div>
      <[compareVersionMetadata.earlierVersion.commitMessage]>
    </td>
  </table>
  <div class="modal-body" style="margin-top: -30px">
    <codemirror-mergeview codemirror-mergeview-options="CODEMIRROR_MERGEVIEW_OPTIONS" left-value="yamlStrs.leftPane" right-value="yamlStrs.rightPane"></codemirror-mergeview>
    <div align="center" style="margin-bottom: 20px">
      <strong>Click arrows to desynchronize scrolling</strong>
    </div>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default protractor-test-close-history-state-modal" ng-click="cancel()">Done</button>
  </div>
</script>

<script type="text/ng-template" id="modals/revertExploration">
  <div class="modal-header">
    <h3>Revert Exploration</h3>
  </div>

  <div class="modal-body">
    <p>
      You are about to revert this exploration to version <[version]>. All changes made since that older version will be retracted.
    </p>
    <p>
      Before reverting, you can preview the exploration you are reverting to by following <a ng-href="<[getExplorationUrl(version)]>" target="_blank">this link</a>. (It opens in a new window.)
    </p>
    <p>
      Are you sure you want to revert this exploration to version <[version]>?
    </p>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default protractor-test-confirm-revert" ng-click="revert()">Revert</button>
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
  </div>
</script>
